<template>
	<view>
		<view class="community">
			<view class="community-top">
				<view class="input">
					<span class="iconfont icon-sousuox"></span>
					<input type="text" placeholder="搜索社团名称" />
				</view>
				<view class="cancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script setup>

</script>

<style lang="scss">
	.community {
		width: 100%;
		height: 100vh;
		padding: 20rpx 0rpx;
		background-color: #efefef;

		.community-top {
			display: flex;
			align-items: center;
			// padding: 20rpx 0;
			border-radius: 20rpx;

			.input {
				flex:1;
				display: flex;
				align-items: center;
				margin-left: 20rpx;
				border-radius: 10rpx;
				background-color: #fff;
				input {
					padding: 16rpx;
					border: none;
					outline: none;
					background: white;
					border-radius: 10rpx;
				}

				.iconfont {
					margin: 0 20rpx;
				}
			}

			.cancel {
				height: 100%;
				font-weight: 600;
				color: #20dab4;
				padding: 0 20rpx;
			}
		}
	}
</style>